<template>
	<view>
		<view class="mui-content">
		    <view class="title">尊敬的<span class="username">{{usersName}}</span>,您目前有<span id="jifen">{{xingyunbi}}</span>个幸运币</view>
		    <button type="button" style="background-color: #007AFF;color: white;">幸运币历史明细</button>
		</view>
		<view v-if="isShow">
			<view id="records-view">
				<view class="mui-col-xs-4" style="width: 30%;">
					时间
				</view>
				<view class="mui-col-xs-4" style="width: 20%;">
				   幸运币
				</view>
				<view class="mui-col-xs-4" style="width: 40%;">
				   备注
				</view>
			</view>
			<view class="records-view" v-for="(item,i) in xingyunbiLiushui" :key="item.id">
				<view class="mui-col-xs-4" style="font-size: 14px;width: 30%;">
					{{item.caozuoTime}}
				</view>
				<view class="mui-col-xs-4" style="width: 20%;">
				   {{item.number}}
				</view>
				<view class="mui-col-xs-4" style="width: 40%;">
				   {{item.beizhu}}
				</view>
			</view>
		</view>
		<view v-if="!isShow" style="margin-top: 200rpx;">
			<view style="width: 120px;height: 120px;margin: auto;">
				<img src="../../static/center/not-records.png" style="width: 100%;height: 100%;"/>
			</view>
			<p style="text-align: center;line-height: 38px;">您还没有相关的历史明细</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usersId:'',			//用户ID
				usersName:'',		//用户名称
				xingyunbi:0,		//幸运币数量
				page:1,				//页数
				limit:10000,		//查询条数
				xingyunbiLiushui:[],//幸运币流水集合
				isShow:false,		//是否有幸运流水
			}
		},
		onLoad() {
			this.usersId = uni.getStorageSync('usersId');
			this.usersName = uni.getStorageSync('userinfo').usersName;
			this.getPageInfo();
		},
		methods: {
			//请求页面数据
			getPageInfo(){
				//获取幸运币数量
				this.$http.get('/xingyun/xingyunbixcx',{
					usersid:this.usersId
				}).then(res => {
					if(res.data.code==200){
						this.xingyunbi = res.data.data
					}else{
						this.$u.toast("请先登录")
					}
				})
				//获取幸运币历史明细
				this.$http.get('/xingyunbiliushui/chaXingyunbiliushui',{
					userID:this.usersId,
					page:this.page,
					limit:this.limit
				}).then(res => {
					console.log(res)
					if(res.data.data.length > 0){
						this.isShow = true;
						this.xingyunbiLiushui = res.data.data;
					}
				})
			}
		}
	}
</script>

<style>
	#records-view{
		text-align: center ;
		width: 90%;
		margin: 20px auto;
		font-size: 17px;
		display: flex;
		justify-content: space-around;
	}
	.records-view{
		text-align: center ;
		width: 90%;
		margin: 9px auto;
		font-size: 17px;
		display: flex;
		justify-content: space-around;
	}
	.title{
		margin: 20px 10px;
		font-size: 17px;
	}
	.cztime{
		font-size: 14px;
	}
	.list-cell{
		padding: 10px 0px;
	}
	#jifen{
		color: black;
	}
</style>
